<div id="opensourceai-panel-recent">
    <div class="opensourceai-panel-header">
        <img src="" class="opensourceai-logo opensourceai-inline" />
        <h3 class="opensourceai-header-text opensourceai-inline">Recent Jobs</h3>
        <a id="close-panel-recent-button" class="opensourceai-float-right opensourceai-button" href="#">[close]</a>
        <span class="opensourceai-float-right">&nbsp;&nbsp;</span>
        <a id="refresh-panel-recent-button" class="opensourceai-float-right opensourceai-button" href="#">[refresh]</a>
    </div>
    
    <div class="opensourceai-panel-body">
        <fieldset class="opensourceai-fieldset">
            <div id="panel-recent-table-wrapper" style="display: none">
            <div class="opensourceai-float-right" id="opensourceai-hide-jobs-toggle">
                <label class="switch">
                  <input type="checkbox" checked id="opensourceai-if-hide-jobs">
                  <span class="slider round"></span>
                </label>
                <span>Hide Completed Jobs</span>
            </div>
            <table id="recent-jobs" class="display order-column nowrap" data-page-length="5">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Cluster</th>
                        <th>VC</th>
                        <th>Time</th>
                        <th>Status</th>
                        <th>Link</th>
                        <th>Notebook</th>
                    </tr>
                </thead>
                <tbody id="recent-jobs-body">
                </tbody>
            </table>
            </div>
             <div id="panel-recent-information-wrapper">
                <span id="panel-recent-information">The panel is not ready. Please wait.</span>
            </div>
        </fieldset>
    </div>
</div>